<template>
  <input type="text" v-model="name">
  <div>{{name}}</div>

  <br/>

  <input type="text" v-model="obj.name">
  <div>{{obj.name}}</div>

</template>

<script>

import { reactive, toRef, computed, ref, watch, watchEffect } from 'vue'

export default {
  name: 'App',
  setup (props, context) {

    // 监听ref
    let name = ref('')

    let obj = reactive({
      name: ''
    })

    watchEffect(() => {
      // 立即执行
      console.log('abc', name.value)
      console.log('bcd', obj.name)
    })

    // 可以停止侦听
    const stop = watchEffect(() => {
      console.log('stop', name.value)
    })

    setTimeout(() => {
      stop()
    }, 5000);

    return {
      name,
      obj
    }
  }
}
</script>

<style>

</style>
